<template>
  <el-row class="cardAction">
    <el-col :span="6" class="col">
      <div class="verCenter">
        <el-icon :size="15" class="pointer">
          <View />
        </el-icon>
        <el-text class="number" type="primary">{{ als.looked }}</el-text>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="verCenter">
        <el-icon :size="15" class="pointer">
          <ChatDotRound />
        </el-icon>
        <el-text class="number" type="primary">{{ als.commented }}</el-text>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="verCenter">
        <svg
          class="pointer"
          t="1698292070619"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1464"
          width="15"
          height="15"
          @click="likeORNotLike()"
        >
          <path
            d="M832 364.8h-147.2s19.2-64 
                  32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 
                  32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 
                  12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 
                  32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 
                  134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 
                  537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 
                  57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 
                  64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 
                  44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 
                  166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z"
            p-id="1465"
            :fill="likeable ? '#000' : '#f00'"
          ></path>
        </svg>
        <el-text class="number" type="primary">{{ als.liked }}</el-text>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { likeORNotLikeAls } from "@/services/algorithm";
import { reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";

const { als } = defineProps({
  als: Object,
});

const data = reactive({
  likeable: als.hasLiked < 1 ? true : false, // 可点赞或取消点赞
});

const { likeable } = toRefs(data);

// 浏览、评论或点赞
const likeORNotLike = async () => {
  const alsID = als.alsId;
  const { respStatus, respMessage } = await likeORNotLikeAls({alsID:alsID, likeType:likeable.value});
  if (!respStatus) return showMsg(respMessage);
  if(likeable.value){
    als.liked++;
    likeable.value = false;
  }else{
    als.liked--;
    likeable.value = true;
  }
};

function showMsg(message, type = "error") {
  ElMessage({ message, type });
}
</script>

<style scoped lang="scss">
.cardAction {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .number {
    padding-left: 5px;
  }
  .verCenter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .pointer {
    cursor: pointer;
  }
  .el-col {
    display: flex;
    justify-content: center;
  }
}
</style>